#@weiXinLayout("我预订的商品")
#define weiXinMain()
#@navBar("我预订的商品",contextPath+"/weixin/mine")
<div class="weui-navbar" style="margin-top:50px;">
    <div class="weui-navbar__item weui_bar__item_on" data-status="0">
        全部
    </div>
    <div class="weui-navbar__item" data-status="1">
        未付款
    </div>
    <div class="weui-navbar__item" data-status="2">
        待发货
    </div>
    <div class="weui-navbar__item" data-status="3">
        等待签收
    </div>
    <div class="weui-navbar__item" data-status="4">
        已签收
    </div>
</div>
<div id="content" style="margin-top:50px;">

</div>
#end

#define weiXinCss()
<style>
    .del-Btn{
        border-radius: 5px;
        margin-right: 5px;
        border: 1px solid #e2541f;
        padding: 10px;
        color: #e2541f;
    }
    .price{
        font-weight: bolder;
        font-size:18px ;
        color: #e2541f;
    }
    .order-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .statusBtn{
        padding: 10px;
        color: white;
        border-radius: 5px;
        background-color: #1aad19;
    }
</style>
#end

#define weiXinJs()
<script type="text/x-mustache" id="template">
    {{#items.list}}
        <div id="order-{{id}}">
            <div class="weui-panel__hd order-title" data-orderId="{{id}}">
                <div>订单号:{{order_ser}}</div>
                {{{statusRenderer}}}
            </div>
           <div class="weui-panel__bd">
            {{#items}}
                <a href="javascript:void(0);" data-id="{{product_id}}" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" width="70" src="{{{cover}}}">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">{{name}}</h4>
                        <p class="weui-media-box__desc">{{desc}}</p>
                        <p class="price">￥{{price}}<span class="status" style="font-size:14px;">{{is_post}}</span></p>
                    </div>
                </a>
                {{/items}}
            </div>
        </div>
    {{/items.list}}
    </script>
<script>
    $(document).ready(function() {
        var pageNum = 1;
        var totalPage =1;
        $(document.body).infinite(50);
        var loading = false;  //状态标记
        $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            loading = true;
            pageNum =pageNum+1;
            if(pageNum<=totalPage){
                initData(pageNum);
            }else{
                $.toast("加载完毕...")
            }
        });
        var status=0;
        function initData(status,pageNum) {
            var config = {
                "url": "#(contextPath)/weixin/mine/queryOrderOfMine",
                "data": {"status":status,"pageNum":pageNum},
                "successCallBack": function (resp) {
                    var temp = $("#template").html();
                    if(resp.data.list.length>0){
                        var data ={
                            items: resp.data,
                            statusRenderer: function () {
                                if(status=="1"){
                                    return "<div style='display: inline-flex'><div class='del-Btn'>删除</div><div class='statusBtn' data-status='1'>立即支付</div></div>"
                                }else if(status=="2"){
                                    return "<div class='statusBtn' data-status='2'>提醒发货</div>"
                                }else if(status=="3"){
                                    return "<div class='statusBtn' data-status='3'>确认收货</div>"
                                }else if(status=="4"){
                                    return "<div class='statusBtn' data-status='4'>申请退货</div>"
                                }
                            }
                        }
                        var content = Mustache.render(temp,data);
                        $("#content").html(content);
                        loading = false;
                        totalPage = resp.data.totalPage
                    }else{
                        $("#content").html("<div class='no-data' style='margin-top: 50px;'>暂无任何记录信息</div>");
                    }
                }
            }
            var ajax = new AjaxUtils(config);
            ajax.executeRequest();
        }

        $(".weui-navbar__item").click(function(){
            var status = $(this).attr("data-status");
            pageNum = 1;
            totalPage =1;
            initData(status,pageNum);
        });
        initData(status,pageNum);

        $("#content").on("click",".del-Btn",function() {
            var self = this;
            $.confirm({
                title: "系统提示",
                "text": '确定要进行当前操作么？',
                "onOK": function () {
                    var orderId = $(self).parent().parent().attr("data-orderId");
                    var config = {
                        "url": "#(contextPath)/weixin/order/delOrder",
                        "data": {id:orderId},
                        "successCallBack": function (resp) {
                            if(resp.result){
                                $.alert(resp.data,function(){
                                    $("#order-"+orderId).remove();
                                });
                            }else{
                                $.alert(resp.data);
                            }
                        }
                    };
                    var ajax = new AjaxUtils(config);
                    ajax.executeRequest();
                }
            });
        });

        $("#content").on("click",".statusBtn",function(){

            var self = this;
            $.confirm({
                title:"系统提示",
                "text":'确定要进行当前操作么？',
                "onOK":function () {
                    var status = $(self).attr("data-status");
                    var orderId = $(self).parent().attr("data-orderId");
                    if(status==1){
                        orderId =$(self).parent().parent().attr("data-orderId");
                        window.location.href="#(contextPath)/weixin/order/confirmPayOrder?id="+orderId;
                    }else if(status==2){
                        var config = {
                            "url": "#(contextPath)/weixin/order/remindSendDelivery",
                            "data": {id:orderId},
                            "successCallBack": function (resp) {
                                if(resp.result){
                                    $.alert(resp.data);
                                }
                            }
                        };
                        var ajax = new AjaxUtils(config);
                        ajax.executeRequest();

                    }else if(status==3){
                        var config = {
                            "url": "#(contextPath)/weixin/order/confirmOrder",
                            "data": {id:orderId},
                            "successCallBack": function (resp) {
                                if(resp.result){
                                    $.alert(resp.data,function(){
                                        $("#order-"+orderId).remove();
                                    });
                                }else{
                                    $.alert(resp.data);
                                }
                            }
                        };
                        var ajax = new AjaxUtils(config);
                        ajax.executeRequest();

                    }else if(status==4){

                    }
                }
            })
        })
    });


</script>
#end
